<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 1000px;
            margin:200px auto;
        }
        th,td{
            width: 500px;
            text-align: center;
        }
        #liu{
            width: 200px;
            height: 50px;
            background-color: aqua;
            border: none;
            border-radius: 10px;
            outline: none;
            font-size: 20px;
            margin: 20px;
        }
        #tc{
           
             position:fixed;   
             top     : 0;
             left    : 0;
             bottom  : 0;
             right   : 0;
             background:rgba(0,0,0,.1); 
             display:none;
            
    
}
         #win{
            width: 500px;
            height: 500px;
            background-color: white;
            margin:auto;
         }
         p{
             font-size: 30px;
             margin-left: 20px;
             line-height: 50px;
             border-bottom: 1px solid #9999;

         }
         h4{
             margin-top: 20px;
             margin-left: 20px;
         }
         input{
             width: 400px;
             height: 30px;
             margin-left: 20px;
         }
         #close,#publish{
             width: 100px;
             height: 30px;
         }
         #close{
             margin-top: 20px;
         }
         #publish{
            margin-top: 20px;
            float: right;
         }
    </style>
    <div class="box">
        <button id="liu">我要留言</button>
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>留言人</th>
                    <th>内容</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="tc">
        <div id="win">
            <p>发布留言</p>
            <h4>留言标题</h4>
            <input type="text" id="title">
            <h4>留言人</h4>
            <input type="text" id="name">
            <h4>留言内容</h4>
            <input type="text" id="content"><br>
            <button id="close">关闭</button>
            <button id="publish">发布</button>
            </div>
    </div>
</body>
<script>
    window.onload = function(){   
      
            //获取列表 
            asd()
        }
         // 添加留言
         var liu = document.getElementById('liu')
         var tc = document.getElementById('tc')
             liu.onclick = function(){
            tc.style="display:block";
             document.getElementById('title').value = ''
            document.getElementById('content').value = ''
             document.getElementById('name').value  = ''
        }
        var close = document.getElementById('close')
        close.onclick = function(){   
            tc.style="display:none";
         
        }
        // 发布
        publish.onclick = function(){   
            var a1 = document.getElementById('title').value
            var a2 = document.getElementById('content').value
            var a3 = document.getElementById('name').value   
      
           var str = new XMLHttpRequest()
              str.open('POST',"https://liu.zzgoodqc.cn/lyb/add",true)
              str.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            console.log(str);
              str.send(`title=${a1}&content=${a2}&name=${a3}`)
              console.log(a1,a2,a3);

              if(a1 !=''&& a2 !='' && a3 !=''){
                    console.log(a1,a2,a3);
                 setTimeout(function(){
                    tc.style="display:none";
                    asd()   
                  },500)
                  alert('发布成功')
              }else{
                  alert('不能为空')
              }                   
        }
        // 删除
       var tb = document.querySelector('table')
          
             tb.onclick = function(e) {    
              if( e.target.name == 'del'){
             var ID = e.target.parentNode.parentNode.firstElementChild.innerHTML     
            var xhr = new XMLHttpRequest()
            xhr.open('GET', `https://liu.zzgoodqc.cn/del/${ID}`,true)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr);
                    var res = JSON.parse(xhr.responseText)
                    console.log(res);                   
                    asd()                    
                }
            }   
                xhr.send()     
                };      
               
                
           }
          
            


           function asd(){    
           var xhr = new XMLHttpRequest()
             xhr.onreadystatechange = function(){
                 if (xhr.readyState == 4  && xhr.status == 200){
                     var res = JSON.parse(xhr.responseText),
                     str = ''
                     for (var i in res.data){
                         str += `<tr>
                                  <td>${res.data[i].id}</td>
                                  <td>${res.data[i].title}</td>
                                  <td>${res.data[i].name}</td>
                                  <td>${res.data[i].content}</td>
                                  <td>${res.data[i].created_at}</td>
                                  <td><button name='del'>删除</button></td>
                                 </tr>`
                     }              
                        document.getElementsByTagName('tbody')[0].innerHTML = str                          
                 }
               
             }
             xhr.open('GET', " https://liu.zzgoodqc.cn/lyb" ,true)
             xhr.send()
            }
           
</script>
</html>